.hc {
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .container .content-wrapper {
    padding-left: 5px;
    padding-right: 5px;
  }
  .container .content-wrapper .top-wrapper > ul > li {
    width: 49%;
    background-color: paleturquoise;
    height: 100px;
    margin-right: 2%;
  }
  .container .content-wrapper .top-wrapper > ul > li:not(:last-child) {
    padding-right: 5px;
  }
  .container .content-wrapper .top-wrapper > ul > li:not(:last-child) .mid-wrapper {
    top: 0;
  }
  .container .content-wrapper .top-wrapper > ul > li:not(:last-child) .mid-wrapper .mid > span.icon-cog,
  .container .content-wrapper .top-wrapper > ul > li:not(:last-child) .mid-wrapper .mid > span.icon-coffee {
    font-size: 100px ;
  }
  .container .content-wrapper .top-wrapper > ul > li:nth-child(2) {
    margin-right: 0;
  }
  .container .content-wrapper .top-wrapper > ul > li:last-child {
    width: 100%;
    margin-top: 15px;
  }
  .container .content-wrapper .top-wrapper .type-box {
    display: flex;
    height: 100%;
  }
  .container .content-wrapper .top-wrapper .type-box > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    text-align: center;
  }
  .container .content-wrapper .search-bar {
    flex-direction: column-reverse;
    align-items: normal;
  }
  .container .content-wrapper .search-bar .filter-wrapper {
    width: auto;
  }
  .container .content-wrapper .search-bar .search-wrapper {
    margin-bottom: 10px;
  }
  .container .content-wrapper .search-bar .search-wrapper .input-wrapper {
    width: 100%;
    padding: 0 10px;
  }
  .container .content-wrapper .search-bar .search-wrapper .input-wrapper .icon-search {
    left: 20px;
  }
  .container .content-wrapper .search-bar .search-wrapper .input-wrapper input {
    width: calc(100% - 35px);
    margin: 10px 0;
  }
  .container .content-wrapper .search-bar .search-wrapper .icon-wrapper {
    display: none;
  }
  .container .content-wrapper .btm-wrapper > ul > li {
    height: auto;
    padding-left: 10px;
  }
  .container .content-wrapper .btm-wrapper > ul > li.idle {
    border-left: 3px solid #7fbc39;
  }
  .container .content-wrapper .btm-wrapper > ul > li.building {
    border-left: 3px solid #ff9a2a;
  }
  .container .content-wrapper .btm-wrapper > ul > li .btn-content-wrapper .top {
    flex-direction: column;
  }
  .container .content-wrapper .btm-wrapper > ul > li .btn-content-wrapper .top .website {
    margin-bottom: 10px;
  }
  .container .content-wrapper .btm-wrapper > ul > li .btn-content-wrapper .top .website .status {
    display: none;
  }
  .container .content-wrapper .btm-wrapper > ul > li .btn-content-wrapper .top .info {
    flex-direction: column;
  }
  .container .content-wrapper .btm-wrapper > ul > li .btn-content-wrapper .top .info > div {
    margin-bottom: 10px;
  }
  .container .content-wrapper .btm-wrapper > ul > li .btn-content-wrapper .btm .list {
    width: 100%;
  }
  .container .content-wrapper .btm-wrapper > ul > li .btn-content-wrapper .btm .list .add-item {
    margin-right: 5px;
  }
  .container .content-wrapper .btm-wrapper > ul > li .btn-content-wrapper .btm .list .item-list {
    display: block;
  }
  .container .content-wrapper .btm-wrapper > ul > li .btn-content-wrapper .btm .list .item-list .item {
    float: left;
  }
  .container .content-wrapper .btm-wrapper > ul > li .btn-content-wrapper .btm .is-deny {
    display: none;
  }
  .slide-bar {
    display: none;
  }
  .layer {
    background-color: rgba(0, 0, 0, 0.4);
  }
  .layer .modal-box {
    width: 100%;
  }
  .layer .modal {
    width: 100%;
    border: none;
  }
  .layer .modal .modal-content {
    box-sizing: border-box;
    width: 100%;
    padding-top: 35px;
  }
  .layer .modal .modal-content .icon-close {
    top: 10px;
  }
  .layer .modal .modal-content .btn-group {
    flex-direction: column;
  }
  .layer .modal .modal-content .btn-group > div {
    flex: 1;
  }
  .layer .modal .modal-content .btn-group .add {
    margin-bottom: 10px;
    margin-right: 0;
  }
}
